<template>
	<view class="time-limit">
		<!-- v-if="times.length==0" -->
		<navbar :config="config" backColor="#000"></navbar>
		<view class="titleView" :style="'background-image: url('+timeLimitBackground+')'">
			<!-- :style="'background-image: url('+imgUrl+'/timeLimit/background.png' + ')'" -->
			<!-- <view class="titleViewTop">
				
				<u-icon name="arrow-left" color="#fff" @click="backFun"></u-icon>
				<image :src="imgUrl+'/timeLimit/timeShop.png'" class="timeShop"></image>
			</view> -->
			<scroll-view class="box" style="width: 750rpx;white-space: nowrap;" scroll-x="true">
				<view class="time" v-for="(item, index) in times" :class="item.active?'timeClass':''"
					@click="switeTime(item)" style="display: inline-block;width: 188rpx;">
					<!-- :key="index" -->
					<view class="number" :class="item.active?'numberRed':''">
						{{ item.st + ":00" }}
					</view>
					<view :class="item.active?'font':'font-soon'" v-if="item.value == 0"> 即将开始 </view>

					<view :class="item.active?'font':'font-soon'" v-if="item.value == 1"> 已开抢 </view>
					<view :class="item.active?'font':'font-soon'" v-if="item.value == 2"> 正在抢购 </view>
				</view>

				<view class="time" v-for="(item, index) in times" :class="item.active?'timeClass':''"
					@click="switeTime(item)" style="display: inline-block;width: 188rpx;">
					<!-- :key="index" -->
					<view class="number" :class="item.active?'numberRed':''">
						{{ item.st + ":00" }}
					</view>
					<view :class="item.active?'font':'font-soon'" v-if="item.value == 0"> 即将开始 </view>

					<view :class="item.active?'font':'font-soon'" v-if="item.value == 1"> 已开抢 </view>
					<view :class="item.active?'font':'font-soon'" v-if="item.value == 2"> 正在抢购 </view>
				</view>

			</scroll-view>


			<view class="top">
				<view class="surplus">
					<view class="surplus-content" v-if="activeState==1">
						<view class="lable"> 本场将于 </view>
						<uni-countdown v-if="countDown" :backgroundColor="'#FF211F'" :color="'#fff'"
							:splitorColor="'#FF211F'" :show-day="time2[0] > 0" :day="time2[0]" :hour="time2[1]"
							:minute="time2[2]" :second="time2[3]" :separator="'zh'">
						</uni-countdown>
						<view class="lable" style="margin-left: 19rpx;"> 结束 </view>
					</view>
					<view class="surplus-content" v-if="activeState==0">
						<view class="lable">即将开始</view>
					</view>
					<view class="surplus-content" v-if="activeState==2">
						<view class="lable">已开抢</view>
					</view>
				</view>
			</view>
			<!-- <swiper class="commodity" :current="currentItem" v-if="goodList && goodList.length > 0" :indicator-dots="false"
			:autoplay="false" @change="imgActiveFun">

			<swiper-item class="commodity-item" v-for="(item,key) in goodList" :key="item.id" @click="
		
          goProductDetails('/pages/product/goods/seckillGoods?id=' + item.id)
        ">
				<view :class="[activeBannerIndex == key ? 'active-back' : 'swiper-back']">
					<image :class="[ activeBannerIndex == key ? 'current-item' : 'default-image' ]" :src="item.cover"
						mode="">
					</image>
					<view class="bottom-back">
						<view :class="[activeBannerIndex == key ? 'active-name' : 'name','u-text2']"> {{ item.title }}
						</view>
						<view class="content-number">
							<view class="large">
								<rich-text :nodes="$mUtil.priceBigSmall(item.min_price)"></rich-text>
							</view>
							<view class="small">
								<rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
							</view>
						</view>
						<view class="soon">
							<view class="soon-item">
								<view class="orange" :style="{ width: 15.3 * item.rate/10 + 'rpx' }">
								</view>
							</view>
							<view class="complete"> 已抢{{ item.rate }}% </view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper> -->
			<!-- <view class="option" v-if="goodList && goodList.length > 0">
			
			<view class="option-item" :class="{ active: activeBannerIndex == index }" v-for="(item, index) in goodList"
				:key="index">
			</view>
		</view> -->




			<!-- start_hour:            // 当前时间场次的开始时间
		now_time:            // 当前时间毫秒值
		finish_time:           // 结束时间毫秒值
		active_state:        // 活动状态;0：即将开始;1：正在抢购; 2：已过期
		shop_id:               // 店铺ID
		goods_id:            // 商品的ID
		title:                     // 商品的标题
		cover:                  // 商品图片
		real_stock_total:  // 秒杀活动的库存量
		result_sale_num:  // 已售出的数量
		sort:                     // 排列顺序
		activity_price:      // 商品的活动价格
		sale_price:           // 商品的原价
		recommended:   // 是否未推荐商品
		rate:                     // 已售商品的的百分比
		name:                  //  某个时段的秒杀活动的名称或标题
		img_url:               //  某个时段的秒杀活动的背景 -->


			<view class="list">
				<view v-if="goodList.length>0">
					<view class="item" v-for="(item, index) in goodList" :key="index" @click="
          goProductDetails('/pages/product/goods/seckillGoods?id=' + item.id)
        ">
						<view class="item-left">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="item-right">
							<view class="title">
								{{ item.title }}
							</view>
							<view class="list-bottom">
								<view class="number">
									<view class="getPrice">到手价：</view>
									<view class="large">
										<rich-text :nodes="$mUtil.priceBigSmall(item.min_price)"></rich-text>
									</view>
									<view class="small">
										<rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
									</view>
								</view>
							</view>
							<view class="list-soon">
								<view class="soon-item">
									<view class="orange" :style="{ width: 15.3 * item.rate/10 + 'rpx' }">
									</view>
								</view>
								<view class="complete"> 已抢{{ item.rate }}% </view>
							</view>

							<view class="btn-box">
								<view class="no-button" v-if="activeState==0">即将开始</view>
								<view class="no-button" v-if="activeState==2">已结束 </view>
								<!-- 立即抢购
									 -->
								<image src="../../../static/image/timeLimit/lijiqianggou.png" class="lijiqianggou"
									v-if="activeState==1 && ispay"></image>
							</view>
						</view>

					</view>
					<loadMore v-if="goodList.length > 0" :status="status"></loadMore>
				</view>
				<!-- <nodata v-else :config="{top:20,content:'暂无商品~'}"></nodata> -->
				<view v-else class="nodata" v-show="times.length==0">
					<image :src="imgUrl+'/timeLimit/nodata.png'" class="nodataImage"></image>

				</view>
			</view>
		</view>
		<ldLoading isFullScreen :active="loading"></ldLoading>
	</view>
</template>

<script>
	let app = getApp()
	export default {
		data() {
			return {
				timeLimitBackground: '',
				imgUrl: this.$mConfig.staticUrl,
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '限时秒杀',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#F9F9F9"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",
				},
				loading: true,
				page: 1,
				limit: 10,
				activeState: null,
				times: [{
						st: "9",
						et: "12",
					},
					{
						st: "13",
						et: "15",
					},
					{
						st: "16",
						et: "18",
					},
					{
						st: "19",
						et: "21",
					},
					{
						st: "22",
						et: "23",
					},
				],
				countDown: true,
				curTime: null,
				goodList: [],
				time2: [0, 0, 0, 0], //秒杀倒计时
				httpCurTime: null,
				status: "more",
				activeBannerIndex: 0,
				params: {},
				endTime: null,
				ispay: app.globalData.openPay,
				currentItem: 0,
				start_hour: '',
				end_hour: '',
			};
		},
		onLoad(options) {

			if (options.shopid) {
				this.params.shop_id = options.shopid
			}
		},
		onShow() {
			this.startFlashSale()
		},
		onLoad(e) {
			this.getTime();
			console.log("e", e)
			if (e.start_hour && e.end_hour) {
				this.start_hour = e.start_hour
				this.end_hour = e.end_hour
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.goodList = [];
			this.times.active = false
			this.times.forEach((item) => {
				item.active = false
			})
			this.getTime();
			uni.stopPullDownRefresh();
		},
		// onReachBottom() {
		// 	this.page++;
		// 	this.getList();
		// },

		methods: {
			startFlashSale() {


				this.$http
					.get(
						`/marketing/seckillActivityGoods/start-flash-sale`, {
							start_hour: this.start_hour + ":00",
							end_hour: this.end_hour + ":00",
							// shop_id: 9
						},
						false
					)

					.then((res) => {
						if (res && res.code == 200) {
							this.activeState = res.data.active_state
							this.time2 = this.$mUtil
								.countDown(Math.floor(res.data.finish_time / 1000), res.data.now_time)
								.split(":")
								.map((val) => Number(val));
							this.goodList = this.goodList.concat(res.data.page.list);
							console.log("res.data这个是的黄牛每年", res.data)

							if (res.data.page.totalPage <= res.data.page.currPage) {
								this.status = "noMore";
							} else {
								this.status = "more";
							}
							this.timeLimitBackground = res.data.img_url
							this.loading = false


						}

					})


			},
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			//切换时间
			switeTime(item) {
				this.countDown = false
				this.time2 = [0, 0, 0, 0]
				this.$nextTick(function() {
					this.countDown = true
				})
				// this.loading = true
				//this.countDown = false
				// this.start_hour = e.start_hour
				// this.end_hour = e.end_hour
				
				
				this.start_hour = item.st 
				this.end_hour = item.et 
				// if (item.et == "23") {
				// 	this.endTime = item.et + ":59"
				// } else {
				// 	this.endTime = item.et + ":00"
				// }

				this.times.forEach((val, index) => {
					val.active = false
				})
				item.active = true

				this.goodList = []
				this.page = 1;
				this.startFlashSale()
				

				// this.getList()

			},
			goProductDetails(url) {
				if (this.activeState == 1) {
					uni.navigateTo({
						url: url,
					});
				} else if (this.activeState == 0) {
					this.$mUtil.toast("该活动还未开始")
				} else {
					this.$mUtil.toast("该活动已结束")
				}

			},
			imgActiveFun(e) {
				this.activeBannerIndex = e.detail.current;
				console.log(this.currentItem)
				console.log(e.detail.current)
			},
			getTime() {
				this.curTime = new Date().getHours();
				this.times.forEach((val, index) => {
					// console.log("时间111" + JSON.stringify(val) + this.curTime);
					// 活动正在进行中
					if (val.st <= this.curTime && this.curTime < val.et) {
						val.value = 2;
						this.httpCurTime = val.st + ":00";
						this.endTime = val.et + ":00";

						val.active = true;

					} else if (this.curTime < val.st) {
						//   活动即将开始
						val.value = 0;

						if (this.httpCurTime == null) {
							this.httpCurTime = val.st + ":00";
							this.endTime = val.et + ":00";
							val.active = true;
						}
					} else if (
						this.curTime >= val.et && this.curTime > this.times[index + 1] < val.st

					) {
						//   活动已过期
						val.value = 1;
					}
				});
				// this.getList();
			},
			// getList() {
			// 	this.loading = false
			// 	this.$http
			// 		.get(
			// 			`/marketing/seckillActivityGoods/start-flash-sale`, {
			// 				start_hour: this.httpCurTime,
			// 				end_hour: this.endTime,
			// 				page: this.page,
			// 				limit: this.limit,
			// 				...this.params
			// 			},
			// 			false
			// 		)

			// 		.then((res) => {

			// 			if (res && res.code == 200) {
			// 				this.activeState = res.data.active_state
			// 				this.time2 = this.$mUtil
			// 					.countDown(Math.floor(res.data.finish_time / 1000), res.data.now_time)
			// 					.split(":")
			// 					.map((val) => Number(val));
			// 				this.goodList = this.goodList.concat(res.data.page.list);

			// 				if (res.data.page.totalPage <= res.data.page.currPage) {
			// 					this.status = "noMore";
			// 				} else {
			// 					this.status = "more";
			// 				}


			// 			}
			// 		});
			// },
		},
	};
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.no-button {
		font-size: 24rpx;
		width: 35%;
		color: #474747;
		font-size: 24rpx;
		font-weight: 500;
		// padding: 12rpx 34rpx;
		padding: 12rpx;
		background-color: #ECECEC;
		border-radius: 32rpx;
		text-align: center;
	}

	.bottom-back {
		background-color: #FFFFFF;
		border-bottom-left-radius: 18rpx;
		border-bottom-right-radius: 18rpx;
		display: flex;
		flex-direction: column;
		position: absolute;
		z-index: -1;
		bottom: 30rpx;
		padding-top: 20rpx;

		.soon {
			padding: 0 20rpx;
			display: flex;
			margin-bottom: 6rpx;
			align-items: center;

			.soon-item {
				width: 153rpx;
				height: 10rpx;
				border-radius: 6rpx;
				border: 2rpx solid #ECECEC;
				background-color: #ECECEC;
				margin-right: 10rpx;

				.orange {
					width: 50rpx;
					height: 10rpx;
					border-radius: 5rpx;
					background-color: #FF0836;
				}
			}

			.complete {
				font-size: 20rpx;
				color: #000;
				line-height: 20rpx;
				font-weight: 500;
			}
		}

		.name {
			padding: 0 20rpx 0 10rpx;
			// margin: 20rpx 0 0 10rpx;
			width: 380rpx;
			box-sizing: border-box;
			line-height: 36rpx;
			height: 72rpx;
			color: #474747;
			// font-weight: 400;
			overflow: hidden;
			// text-overflow: ellipsis;
		}

		.active-name {
			padding: 0 20rpx 0 10rpx;
			// margin: 20rpx 0 0 10rpx;
			width: 420rpx;
			box-sizing: border-box;
			line-height: 36rpx;
			height: 72rpx;
			color: #474747;
			// font-weight: 400;
			overflow: hidden;
			transition: all 0.5s;
		}

		.content-number {
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			margin: 15rpx 0;

			.large {
				font-size: 27rpx;
				color: #FF211F;
				font-weight: bold;
				margin-right: 7rpx;

				text {
					font-size: 27rpx;
				}
			}

			.small {
				font-size: 19rpx;
				color: #AAAAAA;
				font-weight: 500;
				margin-left: 7rpx;
				text-decoration: line-through;
			}
		}

	}


	.commodity {
		margin-top: -139rpx;
		width: 720rpx;
		// padding: 0 30rpx;
		// margin-left: 30rpx;
		// margin-right: 30rpx;
		height: 650rpx;
		margin-left: 30rpx;
		overflow: hidden;

		/deep/ swiper-item {
			width: 450rpx !important;
		}

		/deep/ .uni-swiper-slide-frame {
			width: 420rpx !important;
		}

		.commodity-item {
			//background-color: #FFFFFF;
			// margin-right: 30rpx;
			border-radius: 16rpx;
			// padding: 18rpx;
			padding-top: 0;
			// text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;

			.swiper-back {
				border-radius: 16rpx;
				overflow: hidden;
				// background-color: #FFFFFF;
				width: 380rpx;
				// padding-top: 40rpx;
				height: 610rpx;
				margin-top: 40rpx;
			}

			.active-back {
				// padding-top: 0;
				// background-color: #FFFFFF;
				width: 420rpx;
				height: 650rpx;
				border-radius: 16rpx;
				position: relative;
				transition: all 0.5s;
			}

			.default-image {
				width: 380rpx;
				height: 380rpx;
				border-radius: 16rpx;
				position: relative;
			}

			.current-item {
				width: 420rpx;
				height: 420rpx;
				border-radius: 16rpx;
				transition: all 0.5s;
			}

			.completed {
				font-size: 22rpx;
				margin-top: 2rpx;
				font-weight: 400;
				color: #333333;

				text {
					color: #ff0000;
				}
			}

			.number {
				display: flex;
				align-items: center;

				font-weight: 600;
				font-size: 31rpx;
				color: #FFFFFF;
				line-height: 31rpx;



				.zero {
					margin-left: 20rpx;
					font-size: 22rpx;
					color: #ff0000;
					font-weight: 500;
				}

				.one {
					color: #ff0000;
					font-size: 34rpx;
					// font-weight: 700;
				}

				.two {
					color: #ff0000;
					font-size: 18rpx;
					// font-weight: 700;
				}
			}
		}
	}

	.option {
		margin: 30rpx 0;
		display: flex;
		justify-content: center;

		.option-item {
			background-color: #d9d9d9;
			margin: 0 8rpx;
			width: 14rpx;
			height: 14rpx;
			border-radius: 7rpx;
		}

		.active {
			background-color: #FF721B;
			width: 35rpx;
			height: 14rpx;
			border-radius: 7rpx;
		}
	}

	.list {
		margin: 0 19rpx 0 19rpx;

		.item {
			padding: 20rpx;
			display: flex;
			margin-bottom: 19rpx;
			width: 712rpx;
			// height: 219rpx;
			background: #FFFFFF;
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			box-sizing: border-box;



			.item-left {
				image {
					width: 181rpx;
					height: 181rpx;
					border-radius: 19rpx;
				}
			}

			.item-right {
				margin-left: 19rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				// height: 181rpx;

				.title {
					color: #181818;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-wrap: break-word;
					word-break: break-all;
					white-space: normal !important;

					font-weight: 400;
					font-size: 27rpx;
					line-height: 27rpx;
					color: #333333;
					margin-bottom: 21rpx;




				}

				.list-bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 21rpx;
					height: 27rpx;

					.number {
						display: flex;
						align-items: flex-end;

						.large {
							font-size: 27rpx;
							color: #FF211F;
							font-weight: bold;
							margin-right: 7rpx;

							text {
								font-size: 27rpx;
							}
						}

						.small {
							font-size: 22rpx;
							color: #AAAAAA;
							font-weight: 500;
							text-decoration: line-through;
						}

					}

				}

				.btn-box {
					display: flex;
					justify-content: flex-start;
					margin-top: 21rpx;

					.button {
						width: 35%;
						color: #ffffff;
						font-size: 24rpx;
						font-weight: 500;
						// padding: 12rpx 34rpx;
						padding: 12rpx;
						background-color: #FF721B;
						border-radius: 32rpx;
						text-align: center;
					}
				}


				.list-soon {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.soon-item {
						width: 290rpx;
						height: 15rpx;
						border: 2rpx solid #ECECEC;
						border-radius: 6rpx;
						margin-right: 10rpx;
						background-color: #ECECEC;

						.orange {
							width: 50rpx;
							height: 10rpx;
							background-color: #FF0836;
							border-radius: 5rpx;
						}
					}

					.complete {
						font-size: 20rpx;
						color: #999;
						margin-left: 19rpx;
						font-weight: 500;
					}
				}
			}
		}
	}

	.spot {
		display: flex;
		justify-content: center;
		margin: 27rpx 0 40rpx 0;

		.spot-item {
			width: 35rpx;
			height: 14rpx;
			background-color: #ff4e15;
			margin-right: 16rpx;
		}

		.radius {
			width: 14rpx;
			height: 14rpx;
			background-color: #d9d9d9;
			border-radius: 7rpx;
			margin-right: 16rpx;
		}
	}

	.two-comtent-item {
		margin: 0 30rpx;
		background-color: #ffffff;
		border-radius: 18rpx;

		.two-image {
			overflow: hidden;

			image {
				width: 380rpx;
				height: 380rpx;
				border-radius: 18rpx;
			}
		}

		.two-content-number {
			padding: 0 30rpx;
			display: flex;
			align-items: baseline;

			.two-large {
				font-size: 20rpx;
				color: #ff0000;
				font-weight: bold;

				text {
					font-size: 36rpx;
				}
			}

			.two-small {
				font-size: 22rpx;
				color: #cccccc;
				font-weight: 500;
				margin-left: 16rpx;
				text-decoration: line-through;
			}
		}

		.two-name {
			padding: 0 20rpx;
			width: 368rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			word-wrap: break-word;
			word-break: break-all;
			white-space: normal !important;
		}
	}

	.two-soon {
		padding: 0 30rpx;
		display: flex;
		align-items: center;

		.two-soon-item {
			width: 153rpx;
			height: 10rpx;
			border-radius: 6rpx;
			border: 1rpx solid #fe9000;
			margin-right: 10rpx;

			.two-orange {
				width: 50rpx;
				height: 10rpx;
				border-radius: 5rpx;
				background-color: #fe9000;
			}
		}

		.two-complete {
			font-size: 20rpx;
			color: #fe9000;
			line-height: 24rpx;
			font-weight: 500;
		}
	}


	.content {
		//   align-items: center;
		//   overflow: scroll;
		//   white-space: nowrap;
		// height: 300rpx;
		// background-color: red;
		margin-top: -139rpx;
		//   display: flex;
		margin-left: 30rpx;
		height: 607rpx;

		/deep/ .uni-swiper-slide-frame {
			width: 402rpx !important;
			padding-right: 30rpx;
		}

		.comtent-item {
			margin-right: 30rpx;
			// padding: 0 30rpx;
			background-color: #ffffff;
			border-radius: 18rpx;

			// width: 420rpx;

			image {
				width: 420rpx;
				height: 420rpx;
				border-radius: 18rpx;
			}
		}
	}

	.surplus {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 485rpx;
		height: 77rpx;
		background: #FFFFFF;
		border-radius: 77rpx 77rpx 77rpx 77rpx;



		.surplus-content {
			color: #ffffff;
			font-size: 20rpx;
			font-weight: 500;
			display: flex;
			align-items: center;

			text {
				color: #ff0000;
				padding: 1rpx 4rpx;
				background-color: #dccda4;
				border-radius: 4rpx;
				margin: 0 6rpx 0 14rpx;
			}
		}

		.lable {
			font-weight: 500;
			font-size: 23rpx;
			color: #FF211F;
			line-height: 27rpx;
			margin-right: 19rpx;

		}

		/deep/ .uni-countdown__number {
			padding: 2rpx 8rpx;
			border-radius: 8rpx;
		}


	}

	.top {


		width: 485rpx;
		height: 77rpx;
		background: #FFFFFF;
		border-radius: 77rpx 77rpx 77rpx 77rpx;
		margin-top: 25rpx;
		margin-left: 133rpx;
		margin-bottom: 19rpx;

	}

	.time-limit {
		background-color: #f6f6f6;
	}

	.nodata {
		width: 307rpx;
		height: 307rpx;
		margin: 0 auto;
		margin-top: 363rpx;

		.nodataImage {
			width: 307rpx;
			height: 307rpx;
		}
	}

	.titleView {

		background-size: 100% 100%;
		width: 100%;
		height: 1160rpx;
		padding-top: 490rpx;


		.box {
			// display: flex;
			// justify-content: space-around;
			// width: 100%;
			height: 115rpx;
			width: 100%;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			display: flex;
			flex-direction: row;

			.time {
				text-align: center;

				// width: 150rpx !important;
				border-radius: 0rpx 0rpx 0rpx 0rpx;

				.number {
					font-weight: 600;
					font-size: 31rpx;
					color: rgba(255, 255, 255, 0.6);
					line-height: 31rpx;
					margin-top: 25rpx;
					margin-bottom: 8rpx;
				}

				.font {

					font-weight: 500;
					font-size: 23rpx;
					color: #fff;
					line-height: 27rpx;

				}

				.font-soon {
					font-weight: 400;
					font-size: 23rpx;
					color: rgba(255, 255, 255, 0.6);
					line-height: 27rpx;
				}
			}
		}

	}

	.careerLeft {
		width: 17rpx;
		height: 31rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.timeShop {
		width: 159rpx;
		height: 50rpx;
		margin-left: 27rpx;
	}

	.titleViewTop {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 46rpx;
		padding-left: 25rpx;

	}

	//background-image:url(`this.imgUrl+'/timeLimit/background.png'`);
	.timeClass {
		// background-image: url("https://xhxzy.zhongyihuixuan.com/ycimg/timeLimit/whiteBack.png");
		width: 188rpx !important;
		height: 115rpx;
		background-size: 100% 100%;
	}

	.numberRed {
		font-weight: 600 !important;
		font-size: 31rpx !important;
		color: #fff !important;
		line-height: 31rpx !important;
		margin-top: 25rpx !important;
		margin-bottom: 8rpx !important;
	}

	.getPrice {
		font-weight: 400;
		font-size: 23rpx;
		color: #333333;
	}

	.lijiqianggou {
		width: 135rpx;
		height: 50rpx;
	}
</style>